<template>
    <el-form
    ref="ruleFormRef"
    style="max-width: 600px"
    :model="ruleForm"
    :rules="rules"
    label-width="auto"
    class="demo-ruleForm"
    :size="formSize"
    status-icon
  >
    <el-form-item label="车牌号：" prop="fuelcostsLicensePlate">
      <el-input v-model="ruleForm.fuelcostsLicensePlate" placeholder="请输入车牌号" />
    </el-form-item>
    <el-form-item label="加油费用/元：" prop="fuelcostsFuelFee">
      <el-input v-model="ruleForm.fuelcostsFuelFee" placeholder="请输入加油费用" />
    </el-form-item>
    <el-form-item label="加油量/L：" prop="fuelcostsRefuelingVolume">
      <el-input v-model="ruleForm.fuelcostsRefuelingVolume" placeholder="请输入加油量" />
    </el-form-item>
    <el-form-item label="起始公里数：" prop="fuelcostsOriginate">
      <el-input v-model="ruleForm.fuelcostsOriginate" placeholder="请输入起始公里数" />
    </el-form-item>
    <el-form-item label="支付方式：" prop="fuelcostsPayType">
      <el-radio-group v-model="ruleForm.fuelcostsPayType" >
        <el-radio value="微信支付">微信支付</el-radio>
        <el-radio value="支付宝支付">支付宝支付</el-radio>
        <el-radio value="银联支付">银联支付</el-radio>
        <el-radio value="企业转账">企业转账</el-radio>
        <el-radio value="线下支付">线下支付</el-radio>
        <el-radio value="其他">其他</el-radio>
        <el-input style="width: 200px;"  v-if='ruleForm.fuelcostsPayType=="其他"' v-model="ruleForm.fuelcostsOther"  placeholder="请输入其他支付方式" />
      </el-radio-group>
    </el-form-item>
    <el-form-item label="经办人：" prop="fuelcostsAttn">
      <el-input v-model="ruleForm.fuelcostsAttn" placeholder="请输入经办人" />
    </el-form-item>
    <el-form-item label="备注：" prop="fuelcostsRemark">
      <el-input v-model="ruleForm.fuelcostsRemark" type="textarea" placeholder="请输入备注信息"  />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm(ruleFormRef)">
        提交
      </el-button>
      <el-button @click="resetForm(ruleFormRef)">取消</el-button>
    </el-form-item>
  </el-form>
</template>
<script setup lang=ts>
import { reactive, ref,onMounted } from 'vue'
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
import { ElMessage } from 'element-plus'
import axios from 'axios'
import { useRouter } from 'vue-router'
const router = useRouter();
const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()
//添加字段
const ruleForm = reactive({
    fuelcostsLicensePlate: "",
    fuelcostsFuelFee: "",
    fuelcostsRefuelingVolume: "",
    fuelcostsOriginate: "",
    fuelcostsPayType: "",
    fuelcostsOther:"",
    fuelcostsAttn: "",
    fuelcostsRemark:""
})
//添加方法
const submitForm = async (formEl: FormInstance | undefined) => {
    
  if (!formEl) return
    await formEl.validate((valid, fields) => {
    console.log(ruleForm)
      if (valid) {
        console.log(ruleForm)
        axios.post("FoundationWrite/api/Fuelcosts/AddFuelcosts", ruleForm)
            .then(res => {
                if (res.data.data>0)
                {
                  ElMessage.success("油费添加成功")
                    router.push("/FuelcostsShow")
                }
                else
                {
                    ElMessage.error("油费添加失败")
                    return;
                }
      })
    } else {
      console.log('error submit!', fields)
    }
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}
//表单校验
const rules = reactive<FormRules>({
  fuelcostsLicensePlate: [
    { required: true, message: '车牌号不能为空', trigger: 'blur' },
  ],
  fuelcostsFuelFee: [
    { required: true, message: '加油费用不能为空', trigger: 'blur' },
  ],
  fuelcostsRefuelingVolume: [
    { required: true, message: '加油量不能为空', trigger: 'blur' },
  ],
  fuelcostsOriginate: [
    { required: true, message: '起始公里数不能为空', trigger: 'blur' },
  ],
  fuelcostsPayType: [
    { required: true, message: '请选择支付方式', trigger: 'blur' },
  ],
 fuelcostsAttn: [
    { required: true, message: '经办人不能为空', trigger: 'blur' },
  ],
  fuelcostsRemark: [
    { required: true, message: '备注不能为空', trigger: 'blur' },
  ],
})
</script>